<template>
    <!-- <el-text type="primary">功能开发中</el-text> -->
    <div class="customize">
        <el-row :gutter="10" class="header">
            <el-col :span="1.5">
                <el-button type="primary" plain icon="plus" @click="handleAdd" v-hasFunc="'svgicon:add'">新增</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="success" plain icon="edit" @click="handleUpdate" :disabled="!selected"
                    v-hasFunc="'svgicon:edit'">修改</el-button>
            </el-col>
            <el-col :span="1.5">
                <el-button type="danger" plain icon="delete" @click="handleDelete" :disabled="!selected"
                    v-hasFunc="'svgicon:del'">删除</el-button>
            </el-col>
        </el-row>
        <div class="content">
            <el-row :gutter="0" class="wrapper">
                <el-col v-for="(icon, index) in icons" :key="index" :span="2" @click.stop="handleSelect(icon)">
                    <div class="icon-wrapper" :class="{ highlight: selected && selected.id == icon.id }">
                        <el-icon :size="32" v-html="icon.svgCode"></el-icon>
                        <span class="icon-name unselectable">{{ `customize-${icon.iconName}` }}</span>
                    </div>
                </el-col>
            </el-row>
        </div>
    </div>



    <el-dialog :title="title" v-model="open" width="500px" append-to-body draggable align-center
        :close-on-click-modal="false">
        <el-form ref="formRef" :model="form" :rules="rules" label-width="80px">
            <el-row :gutter="20">
                <el-col :lg="24">
                    <el-form-item label="图标名称" prop="iconName">
                        <el-input v-model="form.iconName" placeholder="请输入图标名称" clearable />
                    </el-form-item>
                </el-col>
                <el-col :lg="24">
                    <el-form-item label="SVG代码" prop="svgCode">
                        <codemirror v-model="form.svgCode" :autofocus="false" :indent-with-tab="true" :tab-size="2"
                            :extensions="extensions" @ready="handleReady" @blur="handleFormat"
                            :style="{ height: '100px', width: '100%' }" />
                        <div style="text-align: right;width: 100%;padding-top: 5px;">
                            <el-button type="primary" @click="handleFormat" link>格式化</el-button>
                            <!-- <el-button type="primary" @click="" link icon="CopyDocument">复制代码</el-button> -->
                        </div>
                    </el-form-item>

                </el-col>
            </el-row>
        </el-form>
        <template #footer>
            <el-button type="primary" @click="submitForm">确 定</el-button>
            <el-button @click="cancel">取 消</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { listSvgIcons, getSvgIcons, delSvgIcons, addSvgIcons, updateSvgIcons } from "@/api/system/svgicons.js";
import { ElMessageBox } from 'element-plus'
import { Codemirror } from 'vue-codemirror'
import { html } from '@codemirror/lang-html'
import { oneDark } from '@codemirror/theme-one-dark'
import beautify from 'js-beautify';

const extensions = [html(), oneDark]

const { proxy } = getCurrentInstance()
const loading = ref(false);
const icons = ref([]);
// 弹出层标题
const title = ref("");
// 是否显示弹出层
const open = ref(false);
//表单ref
const formRef = ref();
const selected = ref();

const state = reactive({
    form: {
        svgCode: '',
        iconName: ''
    },
    rules: {
        iconName: [{ required: true, message: "请输入图标名称", trigger: "blur" }],
    },
})

const { form, rules } = toRefs(state)
// 查询参数
const queryParams = reactive({
    pageIndex: 1,
    pageSize: 10,
});

const view = ref()
// Codemirror 初始化完成的回调
const handleReady = (payload) => {
    view.value = payload.view
}


// 重置表单
const reset = () => {
    form.value = {
        svgCode: '',
        iconName: ''
    }
    proxy.resetForm("formRef");
};

//格式化
const handleFormat = () => {
    form.value.svgCode = beautify.html(form.value.svgCode);
}


const handleAdd = () => {
    reset();
    open.value = true;
    title.value = "添加图标";
};



// 修改按钮操作
const handleUpdate = () => {
    reset();
    const key = selected.value.id;
    getSvgIcons(key).then((response) => {
        Object.assign(form.value, response);
        open.value = true;
        title.value = "修改数据";
    });
};



// 删除按钮操作
const handleDelete = () => {
    const keys = [selected.value.id]
    ElMessageBox.confirm(`图标“${selected.value.iconName}”可能正在被使用，删除后可能引起异常！`, "风险警告", {
        confirmButtonText: '删除',
        cancelButtonText: '取消',
        type: "warning",
    }).then(() => delSvgIcons(keys))
        .then(() => {
            getList();
            proxy.$modal.msgSuccess("删除成功");
        })
        .catch(() => { });
};

//点击图标时
const handleSelect = (icon) => {
    selected.value = icon;
}


//取消弹窗
const cancel = () => {
    open.value = false;
    reset();
}


// 提交按钮
const submitForm = () => {
    const validateForm = formRef.value?.validate;
    if (validateForm) {
        validateForm((valid) => {
            if (valid) {
                const apiCall = form.value.id ? updateSvgIcons : addSvgIcons;
                apiCall(form.value).then(() => {
                    proxy.$modal.msgSuccess("操作成功");
                    open.value = false;
                    getList();
                });
            }
        });
    }
};


// 获取列表方法
const getList = () => {
    loading.value = true;
    listSvgIcons(queryParams).then((response) => {
        icons.value = response.result;
        loading.value = false;
    });
};

onMounted(getList)


</script>

<style lang="scss" scoped>
.customize {
    display: flex;
    flex-direction: column;
    height: 100%;

    .header {
        flex-grow: 0;
    }

    .content {
        flex: 1;
        padding-top: 10px;
    }
}


.icon-wrapper {
    text-align: center;
    border: 1px solid var(--el-border-color);
    padding: 25px;
    cursor: pointer;
    aspect-ratio: 1 / 1;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    &:hover {
        color: var(--el-color-primary);
        box-shadow: var(--el-box-shadow);
    }

    svg: {
        fill: currentColor;
    }
}



.icon-name {
    display: block;
    margin-top: 8px;
    font-size: 14px;
    word-break: break-all;
}

.unselectable {
    -webkit-user-select: none;
    /* Safari */
    -moz-user-select: none;
    /* Firefox */
    -ms-user-select: none;
    /* Internet Explorer/Edge */
    user-select: none;
    /* 标准语法 */
}

.highlight {
    color: var(--el-color-primary);
    box-shadow: var(--el-box-shadow);
    background-color: var(--el-bg-color-page);
}
</style>